<template>
  <section class="container">
    <el-form :model="form" :class=$.role_setting_panel :rules="rules" ref="form" label-position="center" label-width="0px" class="demo-ruleFrom login-container">
      <h3 class="title">萍乡公安交警三四五工作</h3>
      <div class="hx"></div>
      <el-form-item prop="username" style="margin-bottom:25px;">
        <img src="../../assets/images/yonhu_slices/yonhu@3x.png" alt="" srcset="" class="user">
        <el-input type="text" name="fakepasswordremembered" v-model="form.username" auto-complete="off" placeholder="请输入用户名" class="input-row" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <img src="../../assets/images/mima_slices/mima@3x.png" alt="" srcset="" class="psw">
        <el-input type="password" v-model="form.password" auto-complete="off" placeholder="请输入密码" @keyup.enter.native="handleSubmit2" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;height:40px;margin-top:6px;background:rgba(255,255,255,0.3);border:1px solid rgba(255,255,255,1);" @click="handleSubmit2">登录</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
import { api } from "@/fetch/api";
import md5 from "js-md5";

export default {
  data() {
    return {
      logining: false,
      cUserId: "",
      type: '',
      form: {
        username: "",
        password: "",
        remember: true
      },
      cookieUser: {
        username: "",
        password: "",
        userId: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      }
    };
  },
  mounted() { },
  methods: {
    toMain() {
      this.$router.push({ path: "/main" });
    },
    handleSubmit2() {
      localStorage.setItem("username", this.form.username);
      let self = this;
      if (this.form.username === "") {
        self.$message.error("输入错误");
        return false;
      } else if (this.form.password === "") {
        self.$message.error("密码错误");
        return false;
      }
      if (
        self.type === "cookie" &&
        self.form.username === self.cookieUser.username &&
        self.form.password === self.cookieUser.password &&
        self.form.userId === self.cookieUser.userId
      ) {
        let data = {
          cUsername: this.form.username,
          cPassword: this.form.password,
          userId: this.form.cUserId
        };
        api.Login(data).then(response => {
          if (response.status === 100) {
            localStorage.username = self.form.username;
            localStorage.token = response.result.token;
            localStorage.userId = self.form.cUserId;
            localStorage.setItem('roleId', response.result.roleId)
            api.setCookie("token", response.result.token, 7);
            console.log(this.$router.options.routes, 'please1')
            this.$router.addRoutes(systemRoutes)
            api.setCookie("data", data, 7);
            if (self.form.remember) {
              api.setCookie("username", self.form.username, 7);
              api.setCookie("password", md5(self.form.password), 7);
              api.setCookie("cUserId", response.result.cUserId, 7);
            }
            self.toMain();
            self.$message.success("登陆成功");
            self.$message({
              message: "登陆成功",
              type: "success"
            });
          }
        });
      } else {
        let data = {
          cUsername: this.form.username,
          cPassword: this.form.password,
          userId: this.form.userId
        };
        api.Login(data).then(response => {
          if (response.status === 100) {
            self.$store.dispatch(
              "setPermission",
              response.result.permissionList
            );
            localStorage.permissionList = JSON.stringify(
              response.result.permissionList
            );
            localStorage.username = self.form.username;
            localStorage.token = response.result.token;
            localStorage.userId = response.result.userId;
            localStorage.setItem('roleId', response.result.roleId)

            // this.$router.push('/notification')
            api.setCookie("token", response.result.token, 7);
            api.setCookie("data", data, 7);
            if (self.form.remember) {
              api.setCookie("username", self.form.username, 7);
              api.setCookie("password", md5(self.form.password), 7);
            }
            self.toMain();
            self.$message.success("登陆成功");
            self.$message({
              message: "登陆成功",
              type: "success"
            });
          } else {
            this.$message.error(response.message);
          }
        });
      }
    },
  },
  // created() {
  //   let user = api.getCookie("username");
  //   if (user) {
  //     this.type = "cookie";
  //     this.form.username = user;
  //     this.cookieUser.username = user;
  //     this.form.password = api.getCookie("password");
  //     this.cookieUser.password = api.getCookie("password");
  //     // this.form.userId = api.getCookie("userId")
  //   }
  // }
};
</script>

<style lang="less" scoped >
.container {
  height: 100%;
  overflow: hidden;
  background-image: url(../../assets/images/login-bg/bg-01@3x.png);
  background-repeat: no-repeat;
  margin: 0 auto;
  .login-container {
    -webkit-border-radius: 14px;
    border-radius: 14px;
    -moz-border-radius: 14px;
    background-clip: padding-box;
    z-index: 100;
    width: 500px;
    margin: 10% auto;
    border: 1px solid white;
    padding: 35px 102px;
    .input-row {
      height: 40px;
      font-size: 14px;
      margin-top: 5px;
    }
    .hx {
      width: 700px;
      border: 1px solid rgba(255, 255, 255, 1);
      position: relative;
      right: 19.5%;
      margin-bottom: 20px;
      opacity: 0.7;
      color: white;
    }
    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: white;
      font-size: 36px;
    }
  }
}

.user {
  width: 30px;
  height: 30px;
  position: relative;
  top: 0.99rem;
  left: 0.1rem;
}
.psw {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0.2rem;
  left: 0.1rem;
}
.el-form-item__content {
  line-height: 0;
}
</style>

<style lang="stylus" module="$">
.role_setting_panel {
  :global {
    .el-input__inner {
      height: 60px;
      background: rgba(255, 255, 255, 0.08);
      padding-left: 40px;
      color: white;
    }

    .el-form-item__error {
      padding-top: 12px;
    }
  }
}
</style>
